<template>
  <ElButton 
    type="primary" 
    :loading="loading"
    @click="addClassicBooks"
    size="small"
  >
    <ElIcon><IconBook /></ElIcon>
    添加经典书籍
  </ElButton>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElIcon } from 'element-plus';
import { addClassicBooksToBookshelf, hasClassicBooks } from '../../utils/add-classic-books';
import { useMessage } from '../../hooks/message';
import IconBook from '../../assets/svg/icon-open-book.svg';

const loading = ref(false);
const message = useMessage();

const addClassicBooks = async () => {
  loading.value = true;
  
  try {
    const hasClassics = await hasClassicBooks();
    if (hasClassics) {
      message.warning('经典书籍已存在，无需重复添加');
      return;
    }
    
    await addClassicBooksToBookshelf();
    message.success('经典书籍添加成功！');
  } catch (error) {
    console.error('添加经典书籍失败:', error);
    message.error('添加经典书籍失败: ' + (error as Error).message);
  } finally {
    loading.value = false;
  }
};
</script>